*{
    padding: 0;
    margin: 0;
}

.box1{
    $fontSize: 24px;
    $index: 20;

    width: 200px;
    height: 200px;
    background: {
        color: red * 0.8;
    }
    font-size: $fontSize/2;
    animation: boxAni  5s linear;

    @mixin ani($i) {
        #{$i * 1%}{
            transform: translateX($i * 10px)
        }
    }

    @keyframes boxAni {
        // #{$index * 1%}{
        //     transform: translateX(0);
        // }
        // 100%{
        //     transform: translateX(100px);
        // }
        @each $i in 0, 50, 100{
            @include ani($i);
        }
    }
}

%box{
    background-color: brown;
}

@mixin  boxMin($w){
    width: $w;
    @content;
}

.box2{
    @extend .box1;
    @extend %box;
    @include boxMin(400px){height: 300px;};
    animation: none;
}